<template>
    <div class="form_bar">
        <el-form
            ref="ruleFormRef"
            label-position="left"
            label-width="auto"
            :rules="rules"
            :model="formData"
            class="searchForm">
            <el-row :gutter="20">
                <!-- 客户姓名 -->
                <el-col :span="8">
                    <el-form-item label="客户手机号/昵称">
                        <el-input v-model="formData.mobile_or_name" placeholder="请输入客户手机号/昵称" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
                <!-- 客户类型 -->
                <el-col :span="8">
                    <el-form-item label="客户类型">
                        <el-select v-model="formData.cust_type" placeholder="全部">
                            <el-option label="全部" :value="0"></el-option>
                            <el-option
                                v-for="item in type_list"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!-- 归属员工 -->
                <el-col :span="8">
                    <el-form-item label="归属员工">
                        <el-select
                            v-model="formData.work_user_ids"
                            popper-class="zw-hide_select_option"
                            :popper-append-to-body="false"
                            multiple
                            placeholder="请选择员工"
                            @click="openDepart"
                            @change="changeDepart">
                            <el-option
                                v-for="item in creators"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <!-- 客户公海 -->
                <el-col :span="8">
                    <el-form-item label="客户公海" prop="seas_id">
                        <el-select v-model="formData.seas_id" multiple>
                            <el-option
                                v-for="item in sea_list"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <!-- 客户阶段 -->
                <el-col :span="8">
                    <el-form-item label="客户阶段">
                        <el-select v-model="formData.stage" placeholder="全部">
                            <el-option label="全部" :value="0"></el-option>
                            <el-option
                                v-for="item in stage_list"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!-- 创建时间 -->
                <el-col :span="8">
                    <el-form-item label="创建时间">
                        <el-date-picker
                            v-model="formData.created_time"
                            type="daterange"
                            range-separator="-"
                            :default-time="defaultTime()"
                            :editable="false"
                            format="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row justify="end">
                <el-col :span="7">
                    <el-form-item style="padding-left: 20px">
                        <el-button type="primary" @click="submitForm(ruleFormRef)">查询</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!-- 部门人员弹框 -->
        <ZWDepart ref="DepartRef" @submit="getDepart" />
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, onMounted } from 'vue';
import type { ElForm, FormInstance, FormRules } from 'element-plus';
import ZWDepart from '@/components/ZWDepart.vue';
import { stageList } from '@/api/customerCenter/labellagroup';
// import { seaList } from '@/api/customerCenter/customerSea'
import { getCustomerOpenseaSelect as seaList } from '@/api/customer/manage/list';

import { getSetionId, defaultTime } from '@/utils/utils';
// const emit = defineEmits(['submit'])
const DepartRef = ref(null);
const creators = reactive([]);
const type_list = reactive([
    {
        id: 1,
        name: '个人客户'
    },
    {
        id: 2,
        name: '企业客户'
    }
]);

type Props = {
    modelValue: boolean;
    default_sea?: number;
    params?: object;
};
const props = defineProps<Props>();
const emit = defineEmits(['submit', 'update:modelValue', 'update:default_sea', 'update:params']);
const updateVisible = (flag: boolean): void => {
    emit('update:modelValue', flag);
};
const updateDefaultSea = (default_sea: number): void => {
    emit('update:default_sea', default_sea);
};
updateVisible(false);

const stage_list = reactive([]);
const sea_list = reactive([]);
const formData = reactive({
    mobile_or_name: '',
    cust_type: 0,
    work_user_ids: [],
    seas_id: [],
    stage: 0,
    created_time: []
});

const updateParams = (params: any): void => {
    emit('update:params', params);
};
updateParams(formData);

const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
    seas_id: [
        {
            required: false,
            message: '请至少选择一个公海',
            trigger: 'change'
        }
    ]
});

//打开新建选择人
const openDepart = () => {
    DepartRef.value.multiple = false;
    DepartRef.value.departVisble = true;
    DepartRef.value.selectedMember = creators;
};
// 获取部门成员
const getDepart = (res: any) => {
    creators.splice(0);
    creators.push(...res);
    formData.work_user_ids = getSetionId('id', res);
    DepartRef.value.departVisble = false;
};
const changeDepart = (data: any) => {
    const removeDepart = creators.find((item: any) => !data.includes(item.id));
    const arr: any[] = creators.filter((item: any) => data.includes(item.id));
    formData.work_user_ids = getSetionId('id', arr);
    creators.splice(0);
    creators.push(...arr);
    DepartRef.value.removeItem(removeDepart);
};

const submitForm = async (formEl: FormInstance | undefined, isClear?: any) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            emit('submit', formData, isClear);
        }
    });
};

//重置
const resetForm = async () => {
    formData.mobile_or_name = '';
    formData.cust_type = 0;
    formData.stage = 0;
    formData.work_user_ids.splice(0);
    formData.seas_id.splice(0);
    formData.seas_id.push(sea_list[0].id);
    formData.created_time.splice(0);
    creators.splice(0);
    await submitForm(ruleFormRef.value, true);
};

onMounted(() => {
    stageList({
        page: 1,
        page_size: 9999
    }).then((res: any) => {
        stage_list.splice(0);
        stage_list.push(...res);
    });
    seaList({ type: 1 }).then((res: any) => {
        sea_list.splice(0);
        sea_list.push(...res);
        formData.seas_id.push(res[0].id);
        updateDefaultSea(res[0].id);
        updateVisible(true);
    });
});

watch(
    () => formData,
    val => {
        updateParams(formData);
    },
    { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
.form_bar {
    background: #f9f9f9;
    display: flex;
    align-items: center;
    border: 1px solid #eae7e7;

    // :deep .el-input__inner{
    //   width: 220px;
    // }
    .searchForm {
        :deep .el-form-item {
            margin: 5px;
        }

        :deep(.el-date-editor.el-input__wrapper) {
            width: auto;
        }
    }
}

:deep .el-select__popper.el-popper[role='tooltip'] {
    display: none;
}
</style>
